<template>
  <div id="yard-view" ref="appContainer" @mousemove="updateMousePosition">
    <!--堆场信息-->
    <div class="zoom-container">
      <div class="zoom-wrapper" :style="zoomStyle" ref="zoomWrapper">
        <YardBlock
          v-for="yard in yardList"
          :key="yard.yardId"
          :ref="`yardBlock-${yard.yardId}`"
          :yardData="yard"
          :showContainers="showContainers"
          :showPlans="showPlans"
          :showLocks="showLocks"
          :isEditMode="isEditMode"
          :isSelected="selectedYardId === yard.yardId"
          :style="getYardStyle(yard)"
          :class="{ 'dragging': dragState.isDragging && dragState.draggedYardId === yard.yardId }"
          @show-yard-detail="handleShowYardDetail"
          @show-bay-viewer="handleShowBayViewer"
          @start-drag="startDragYard"
          @yard-selected="handleYardSelected"
          @yard-rotated="handleYardRotated"
        />
      </div>
    </div>
    <!--缩放控制-->
    <div class="zoom-controls">
      <button @click="zoomIn" class="zoom-btn" title="快速放大:Ctrl+滚轮向上">+</button>
      <span class="zoom-level" title="Ctrl+滚轮缩放">{{ Math.round(zoomLevel * 100) }}%</span>
      <button @click="zoomOut" class="zoom-btn" title="快速缩小:Ctrl+滚轮向下">-</button>
      <button @click="resetZoom" class="zoom-btn reset">重置</button>
      <button @click="toggleEditMode" class="zoom-btn mode-toggle" :class="{ active: isEditMode }">
        {{ isEditMode ? '堆场编辑' : '查看模式' }}
      </button>
      <button @click="toggleContainers" class="zoom-btn container-toggle" :class="{ active: showContainers }" :disabled="isEditMode">
        {{ showContainers ? '隐藏集装箱' : '显示集装箱' }}
      </button>
      <button @click="togglePlans" class="zoom-btn plan-toggle" :class="{ active: showPlans }" :disabled="isEditMode">
        {{ showPlans ? '隐藏计划' : '显示计划' }}
      </button>
      <button @click="toggleLocks" class="zoom-btn lock-toggle" :class="{ active: showLocks }" :disabled="isEditMode">
        {{ showLocks ? '隐藏加锁' : '显示加锁' }}
      </button>
      <button @click="refreshAllYards" class="zoom-btn refresh-btn">
        刷新数据
      </button>
    </div>
    <!-- 鼠标位置显示 -->
    <div class="mouse-position" v-if="mousePosition">
      <div class="position-item">
        <span class="label">屏幕坐标:</span>
        <span class="value">{{ mousePosition.x }}, {{ mousePosition.y }}</span>
      </div>
      <div class="position-item">
        <span class="label">缩放比例:</span>
        <span class="value">{{ Math.round(zoomLevel * 100) }}%</span>
      </div>
    </div>

    <!-- 全局堆场详细信息模态框 -->
    <YardDetail
      :visible="showYardDetailModal"
      :yardData="currentYardDetailData.yardData"
      :containerData="currentYardDetailData.containerData"
      :yardPlans="currentYardDetailData.yardPlans"
      :yardLocks="currentYardDetailData.yardLocks"
      @close="closeYardDetailModal"
      @refresh="refreshYardDetailData"
      @selection-changed="handleSelectionChanged"
      @selection-cleared="handleSelectionCleared"
      @plan-saved="handlePlanSaved"
      @plan-resized="handlePlanResized"
      @lock-saved="handleLockSaved"
      @show-bay-viewer="handleShowBayViewer"
    />

    <!-- 单贝图展示模态框 -->
    <BayViewer
      :visible="showBayViewerModal"
      :yardId="currentBayViewerData.yardId"
      :bayNumber="currentBayViewerData.bayNumber"
      :bayCount="currentBayViewerData.bayCount"
      :rowCount="currentBayViewerData.rowCount"
      :tierCount="currentBayViewerData.tierCount"
      :containerData="currentBayViewerData.containerData"
      :yardPlans="currentBayViewerData.yardPlans"
      :yardLocks="currentBayViewerData.yardLocks"
      @close="closeBayViewerModal"
      @refresh="refreshBayViewerData"
      @bay-changed="handleBayChanged"
    />

    <!-- 概览图组件 -->
    <OverviewMap
      :mainContainer="$refs.zoomWrapper"
      :visible="showOverviewMap"
      :zoomLevel="zoomLevel"
      @visibility-changed="handleOverviewVisibilityChanged"
    />
  </div>
</template>

<script>
import YardBlock from "@/components/YardBlock.vue";
import YardDetail from "@/components/YardDetail.vue";
import BayViewer from "@/components/BayViewer.vue";
import OverviewMap from "@/components/OverviewMap.vue";
import dataApiService from "@/services/api.js";

export default {
  name: 'YardView',
  components: {
    YardBlock,
    YardDetail,
    BayViewer,
    OverviewMap
  },
  data() {
    return {
      yardList: [],
      zoomLevel: 1, // 缩放比例(1即100%)
      minZoom: 0.1, // 最小缩放比例(0.1即10%)
      maxZoom: 5, // 最大缩放比例(5即500%)
      zoomStep: 0.1, // 缩放步长，用来控制每次点击缩放按钮时缩放变化的幅度。
      zoomOrigin: 'top left', // 缩放原点
      blockOrigin: 'center', // 堆场旋转原点
      mousePosition: null, // 鼠标位置数据
      showContainers: true, // 控制集装箱显示状态
      showPlans: true, // 控制堆场计划显示状态
      showLocks: true, // 控制堆场加锁显示状态
      isEditMode: false, // 是否为编辑模式，false为查看模式
      // 拖拽功能相关数据
      dragState: {
        isDragging: false, // 是否正在拖拽
        draggedYardId: null, // 正在拖拽的堆场ID
        startPosition: { x: 0, y: 0 }, // 拖拽开始位置
        originalPosition: { x: 0, y: 0 }, // 堆场原始位置
        currentPosition: { x: 0, y: 0 } // 当前拖拽位置
      },
      dragAnimationFrame: null, // 拖拽动画帧ID
      // 全局堆场详细信息模态框状态
      showYardDetailModal: false, // 是否显示堆场详细信息模态框
      currentYardDetailData: { // 当前显示的堆场详细信息数据
        yardData: null,
        containerData: [],
        yardPlans: [],
        yardLocks: []
      },
      // 单贝图展示模态框状态
      showBayViewerModal: false, // 是否显示单贝图模态框
      currentBayViewerData: { // 当前显示的单贝图数据
        yardId: '',
        bayNumber: 0,
        bayCount: 0,
        rowCount: 0,
        tierCount: 0,
        containerData: [],
        yardPlans: [],
        yardLocks: []
      },
      // 概览图状态
      showOverviewMap: true, // 是否显示概览图
      // 旋转功能相关数据
      selectedYardId: null // 当前选中的堆场ID
    }
  },
  async mounted() {
    try {
      this.yardList = await dataApiService.getYardList()

      // 加载保存的堆场位置
      this.loadYardPositionsFromLocalStorage()
    } catch (error) {
      console.error('加载堆场列表失败:', error)
    }

    // 添加滚轮缩放事件监听器
    this.$refs.appContainer.addEventListener('wheel', this.handleWheelZoom, { passive: false })
  },

  beforeDestroy() {
    // 移除滚轮缩放事件监听器
    if (this.$refs.appContainer) {
      this.$refs.appContainer.removeEventListener('wheel', this.handleWheelZoom)
    }
  },
  computed: {
    zoomStyle() {
      return {
        transform: `scale(${this.zoomLevel})`,
        transformOrigin: `${this.zoomOrigin}`,
        position: 'relative',
        width: '100%',
        height: '100%'
      }
    }
  },
  methods: {
    getYardStyle(yard) {
      return {
        position: 'absolute',
        left: `${yard.x}px`,
        top: `${yard.y}px`,
        transform: `rotate(${yard.rotation}deg)`,
        transformOrigin: `${this.blockOrigin}`
      }
    },
    // 增加缩放比例
    zoomIn() {
      this.zoomLevel = Math.min(this.maxZoom, this.zoomLevel + this.zoomStep)
    },
    // 减小缩放比例
    zoomOut() {
      this.zoomLevel = Math.max(this.minZoom, this.zoomLevel - this.zoomStep)
    },
    // 重置缩放比例
    resetZoom() {
      this.zoomLevel = 1
    },

    // 处理滚轮缩放
    handleWheelZoom(event) {
      // 检查是否按下了 Ctrl 键
      if (event.ctrlKey) {
        // 阻止默认的滚轮行为（页面滚动）
        event.preventDefault()
        
        // 根据滚轮方向进行缩放
        if (event.deltaY < 0) {
          // 向上滚动，放大
          this.zoomIn()
        } else {
          // 向下滚动，缩小
          this.zoomOut()
        }
      }
    },
    // 更新鼠标位置
    updateMousePosition(event) {
      const rect = this.$refs.appContainer.getBoundingClientRect()
      const x = event.clientX - rect.left
      const y = event.clientY - rect.top

      this.mousePosition = {
        x: Math.round(x),
        y: Math.round(y)
      }
    },
    // 切换集装箱显示状态
    toggleContainers() {
      this.showContainers = !this.showContainers
    },
    // 切换堆场计划显示状态
    togglePlans() {
      this.showPlans = !this.showPlans
    },
    // 切换堆场加锁显示状态
    toggleLocks() {
      this.showLocks = !this.showLocks
    },
    // 切换编辑模式
    toggleEditMode() {
      this.isEditMode = !this.isEditMode
    },

    // 刷新所有堆场数据
    refreshAllYards() {
      console.log('触发所有堆场数据刷新...')

      // 遍历所有YardBlock组件，调用它们的刷新方法
      this.yardList.forEach(yard => {
        const yardBlock = this.$refs[`yardBlock-${yard.yardId}`]?.[0]
        if (yardBlock && yardBlock.refreshData) {
          yardBlock.refreshData()
        }
      })

      // 重新加载堆场位置数据
      this.loadYardPositionsFromLocalStorage()

      // 强制重新渲染
      this.$forceUpdate()

      // 触发内容变化事件，通知概览图重新生成快照
      this.triggerContentChanged()

      console.log('所有堆场数据刷新完成')
    },
    // 处理选择变化事件
    handleSelectionChanged(data) {
      console.log('收到选择变化事件:', data)
    },
    // 处理清除选择事件
    handleSelectionCleared(data) {
      console.log('收到清除选择事件:', data)
    },
    // 处理计划保存事件
    handlePlanSaved(data) {
      console.log('收到计划保存事件:', data)
    },

    // 处理加锁保存事件
    handleLockSaved(data) {
      console.log('收到加锁保存事件:', data)
    },

    // 处理计划调整大小事件
    async handlePlanResized(data) {
      console.log('收到计划调整大小事件:', data)

      if (data.newPlan) {
        try {
          // 调用API更新计划
          const result = await dataApiService.updateYardPlan(data.planId, {
            startBay: data.newPlan.startBay,
            endBay: data.newPlan.endBay,
            startRow: data.newPlan.startRow,
            endRow: data.newPlan.endRow,
            description: data.newPlan.description
          })

          console.log('✅ 计划调整大小已保存:', {
            planId: data.planId,
            originalBounds: `${data.originalPlan.startBay}-${data.originalPlan.endBay}贝 ${data.originalPlan.startRow}-${data.originalPlan.endRow}排`,
            newBounds: `${data.newPlan.startBay}-${data.newPlan.endBay}贝 ${data.newPlan.startRow}-${data.newPlan.endRow}排`
          })

          // 更新当前显示的堆场详细信息数据
          if (this.currentYardDetailData.yardData && 
              this.currentYardDetailData.yardData.yardId === data.yardId) {
            this.currentYardDetailData.yardPlans = result.updatedPlans
            console.log('已更新堆场详细信息中的计划数据')
          }
          
          // 找到对应的YardBlock组件并更新其数据
          const targetYardBlock = this.$refs[`yardBlock-${data.yardId}`]?.[0]
          if (targetYardBlock) {
            targetYardBlock.yardPlans = result.updatedPlans
            console.log('已更新YardBlock组件中的计划数据')
          }
        } catch (error) {
          console.error('保存计划调整失败:', error)
          alert('保存计划调整失败: ' + error.message)
        }
      }
    },

    // 处理显示堆场详细信息事件
    handleShowYardDetail(data) {
      // 设置当前堆场详细信息数据
      this.currentYardDetailData = {
        yardData: data.yardData,
        containerData: data.containerData || [],
        yardPlans: data.yardPlans || [],
        yardLocks: data.yardLocks || []
      }

      // 显示模态框
      this.showYardDetailModal = true

      console.log('显示堆场详细信息:', data.yardId)
    },

    // 关闭堆场详细信息模态框
    closeYardDetailModal() {
      this.showYardDetailModal = false
      // 清空数据
      this.currentYardDetailData = {
        yardData: null,
        containerData: [],
        yardPlans: [],
        yardLocks: []
      }
      console.log('关闭堆场详细信息模态框')
    },

    // 刷新堆场详细信息数据
    async refreshYardDetailData() {
      if (!this.currentYardDetailData.yardData) {
        return
      }

      try {
        // 找到对应的YardBlock组件
        const yardId = this.currentYardDetailData.yardData.yardId
        const targetYardBlock = this.$refs[`yardBlock-${yardId}`]?.[0]

        if (targetYardBlock) {
          // 重新加载数据
          await targetYardBlock.loadContainerData()
          await targetYardBlock.loadYardPlans()
          await targetYardBlock.loadYardLocks()

          // 更新当前显示的数据
          this.currentYardDetailData = {
            yardData: targetYardBlock.yardData,
            containerData: targetYardBlock.containerData,
            yardPlans: targetYardBlock.yardPlans,
            yardLocks: targetYardBlock.yardLocks
          }

          console.log('堆场详细信息数据已刷新:', this.currentYardDetailData.yardData.yardId)
        }
      } catch (error) {
        console.error('刷新堆场详细信息数据失败:', error)
      }
    },

    // 处理显示单贝图事件
    handleShowBayViewer(data) {
      // 设置当前单贝图数据
      this.currentBayViewerData = {
        yardId: data.yardId,
        bayNumber: data.bayNumber,
        bayCount: data.bayCount,
        rowCount: data.rowCount,
        tierCount: data.tierCount,
        containerData: data.containerData || [],
        yardPlans: data.yardPlans || [],
        yardLocks: data.yardLocks || []
      }
      // 显示模态框
      this.showBayViewerModal = true

      console.log('显示单贝图:', data)
    },

    // 关闭单贝图模态框
    closeBayViewerModal() {
      this.showBayViewerModal = false
      // 清空数据
      this.currentBayViewerData = {
        yardId: '',
        bayNumber: 0,
        bayCount: 0,
        rowCount: 0,
        tierCount: 0,
        containerData: [],
        yardPlans: [],
        yardLocks: []
      }
      console.log('关闭单贝图模态框')
    },

    // 刷新单贝图数据
    async refreshBayViewerData() {
      if (!this.currentBayViewerData.yardId) {
        return
      }

      try {
        // 找到对应的YardBlock组件
        const yardId = this.currentBayViewerData.yardId
        const targetYardBlock = this.$refs[`yardBlock-${yardId}`]?.[0]

        if (targetYardBlock) {
          // 重新加载数据
          await targetYardBlock.loadContainerData()
          await targetYardBlock.loadYardPlans()
          await targetYardBlock.loadYardLocks()

          // 更新当前显示的数据
          this.currentBayViewerData = {
            ...this.currentBayViewerData,
            containerData: targetYardBlock.containerData,
            yardPlans: targetYardBlock.yardPlans,
            yardLocks: targetYardBlock.yardLocks
          }

          console.log('单贝图数据已刷新:', this.currentBayViewerData.yardId, '贝号:', this.currentBayViewerData.bayNumber)
        }
      } catch (error) {
        console.error('刷新单贝图数据失败:', error)
      }
    },

    /**
     * 处理贝号切换事件
     * @param {Object} data - 包含新贝号信息的对象
     */
    handleBayChanged(data) {
      console.log('贝号切换:', data)
      
      // 更新当前贝图数据
      this.currentBayViewerData = {
        yardId: data.yardId,
        bayNumber: data.bayNumber,
        bayCount: data.bayCount,
        rowCount: data.rowCount,
        tierCount: data.tierCount,
        containerData: data.containerData,
        yardPlans: data.yardPlans || this.currentBayViewerData.yardPlans,
        yardLocks: data.yardLocks || this.currentBayViewerData.yardLocks
      }

      console.log('已切换到贝号:', data.bayNumber)
    },

    // 拖拽功能相关方法
    // 开始拖拽堆场
    startDragYard(event, yardId) {
      if (!this.isEditMode) return

      const yard = this.yardList.find(y => y.yardId === yardId)
      if (!yard) return

      this.dragState.isDragging = true
      this.dragState.draggedYardId = yardId
      this.dragState.startPosition = { x: event.clientX, y: event.clientY }
      this.dragState.originalPosition = { x: yard.x, y: yard.y }
      this.dragState.currentPosition = { x: yard.x, y: yard.y }

      // 阻止默认行为
      event.preventDefault()
      event.stopPropagation()

      // 添加全局事件监听器
      document.addEventListener('mousemove', this.handleDragMove)
      document.addEventListener('mouseup', this.handleDragEnd)

      console.log('开始拖拽堆场:', yardId)
    },

    // 处理拖拽移动
    handleDragMove(event) {
      if (!this.dragState.isDragging || !this.dragState.draggedYardId) return

      // 使用 requestAnimationFrame 优化性能
      if (this.dragAnimationFrame) {
        cancelAnimationFrame(this.dragAnimationFrame)
      }

      this.dragAnimationFrame = requestAnimationFrame(() => {
        // 计算拖拽偏移量
        const deltaX = event.clientX - this.dragState.startPosition.x
        const deltaY = event.clientY - this.dragState.startPosition.y

        // 计算新位置（考虑缩放比例）
        const newX = this.dragState.originalPosition.x + deltaX / this.zoomLevel
        const newY = this.dragState.originalPosition.y + deltaY / this.zoomLevel

        this.dragState.currentPosition = { x: newX, y: newY }

        // 更新堆场位置
        const yard = this.yardList.find(y => y.yardId === this.dragState.draggedYardId)
        if (yard) {
          yard.x = newX
          yard.y = newY
        }
      })
    },

    // 结束拖拽
    handleDragEnd() {
      if (!this.dragState.isDragging) return

      const yardId = this.dragState.draggedYardId
      const newPosition = this.dragState.currentPosition

      // 清理动画帧
      if (this.dragAnimationFrame) {
        cancelAnimationFrame(this.dragAnimationFrame)
        this.dragAnimationFrame = null
      }

      // 移除全局事件监听器
      document.removeEventListener('mousemove', this.handleDragMove)
      document.removeEventListener('mouseup', this.handleDragEnd)

      // 重置拖拽状态
      this.dragState.isDragging = false
      this.dragState.draggedYardId = null

      console.log('结束拖拽堆场:', yardId, '新位置:', newPosition)

      // 这里可以添加保存位置到服务器的逻辑
      this.saveYardPosition(yardId, newPosition)

      // 触发内容变化事件，通知概览图重新生成快照
      this.triggerContentChanged()
    },

    // 保存堆场位置（调用API服务）
    async saveYardPosition(yardId, position) {
      try {
        // 调用API服务保存位置
        const result = await dataApiService.updateYardPosition(yardId, {
          x: position.x,
          y: position.y,
          rotation: position.rotation || 0
        })

        console.log('堆场位置已保存:', result)
        
        // 显示保存成功提示（可选）
        if (result.success) {
          console.log('✅ 堆场位置保存成功:', yardId, position)
        }
      } catch (error) {
        console.error('保存堆场位置失败:', error)
        // 如果API保存失败，至少保存到本地存储作为备份
        this.saveYardPositionsToLocalStorage()
      }
    },

    // 保存所有堆场位置到本地存储
    saveYardPositionsToLocalStorage() {
      try {
        const yardPositions = this.yardList.map(yard => ({
          yardId: yard.yardId,
          x: yard.x,
          y: yard.y,
          rotation: yard.rotation
        }))

        localStorage.setItem('yardPositions', JSON.stringify(yardPositions))
        console.log('堆场位置已保存到本地存储')
      } catch (error) {
        console.error('保存到本地存储失败:', error)
      }
    },

    // 从本地存储加载堆场位置
    loadYardPositionsFromLocalStorage() {
      try {
        const savedPositions = localStorage.getItem('yardPositions')
        if (savedPositions) {
          const positions = JSON.parse(savedPositions)

          // 更新堆场位置
          positions.forEach(savedPos => {
            const yard = this.yardList.find(y => y.yardId === savedPos.yardId)
            if (yard) {
              yard.x = savedPos.x
              yard.y = savedPos.y
              yard.rotation = savedPos.rotation
            }
          })

          console.log('堆场位置已从本地存储加载')
        }
      } catch (error) {
        console.error('从本地存储加载失败:', error)
      }
    },

    // 处理概览图可见性变化
    handleOverviewVisibilityChanged(isVisible) {
      this.showOverviewMap = isVisible
    },

    // 触发内容变化事件（供概览图监听）
    triggerContentChanged() {
      this.$root.$emit('content-changed')
    },


    // 处理堆场选择事件
    handleYardSelected(yardId) {
      this.selectedYardId = yardId
      console.log('选中堆场:', yardId)
    },

    // 处理堆场旋转事件
    handleYardRotated(data) {
      console.log('堆场旋转:', data)
      
      // 先更新堆场数据
      const yard = this.yardList.find(y => y.yardId === data.yardId)
      if (yard) {
        yard.rotation = data.rotation
      }
      
      // 保存旋转角度（只保存一次）
      this.saveYardPosition(data.yardId, { 
        x: yard?.x || 0, 
        y: yard?.y || 0, 
        rotation: data.rotation 
      })

      // 触发内容变化事件
      this.triggerContentChanged()
    },
  }
}
</script>

<style>
#yard-view {
  font-family: 'Microsoft YaHei', Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

* {
  box-sizing: border-box !important;
}

/* 确保所有堆场相关元素都使用border-box */
.yard-view,
.yard-container,
.yard-grid,
.column-headers,
.yard-row,
.bay-header,
.column-header,
.bay-number,
.grid-cell {
  box-sizing: border-box !important;
}

/* 专门处理旋转元素的尺寸问题 */
.yard-container[style*="transform"] {
  /* 强制重置尺寸计算，确保旋转时也使用border-box */
  box-sizing: border-box !important;
  /* 确保旋转时保持正确的尺寸 */
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
}

/* 旋转堆场内的所有子元素也要强制使用border-box */
.yard-container[style*="transform"] * {
  box-sizing: border-box !important;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}

.zoom-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoom-wrapper {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

.zoom-controls {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.zoom-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.zoom-btn:hover {
  background: #f0f0f0;
  border-color: #999;
}

.zoom-btn:active {
  background: #e0e0e0;
}

.zoom-btn.reset {
  width: auto;
  padding: 0 12px;
  font-size: 12px;
  font-weight: normal;
}

.zoom-btn.container-toggle {
  width: auto;
  padding: 0 12px;
  font-size: 12px;
  font-weight: normal;
  background: #f0f0f0;
  border-color: #ccc;
}

.zoom-btn.container-toggle:hover {
  background: #e0e0e0;
  border-color: #999;
}

.zoom-btn.container-toggle.active {
  background: #4CAF50;
  color: white;
  border-color: #45a049;
}

.zoom-btn.container-toggle.active:hover {
  background: #45a049;
  border-color: #3d8b40;
}

.zoom-btn.plan-toggle {
  width: auto;
  padding: 0 12px;
  font-size: 12px;
  font-weight: normal;
  background: #f0f0f0;
  border-color: #ccc;
}

.zoom-btn.plan-toggle:hover {
  background: #e0e0e0;
  border-color: #999;
}

.zoom-btn.plan-toggle.active {
  background: #2196F3;
  color: white;
  border-color: #1976D2;
}

.zoom-btn.plan-toggle.active:hover {
  background: #1976D2;
  border-color: #1565C0;
}

.zoom-btn.lock-toggle {
  width: auto;
  padding: 0 12px;
  font-size: 12px;
  font-weight: normal;
  background: #f0f0f0;
  border-color: #ccc;
}

.zoom-btn.lock-toggle:hover {
  background: #e0e0e0;
  border-color: #999;
}

.zoom-btn.lock-toggle.active {
  background: #FF9800;
  color: white;
  border-color: #F57C00;
}

.zoom-btn.lock-toggle.active:hover {
  background: #F57C00;
  border-color: #EF6C00;
}

.zoom-btn.mode-toggle {
  width: auto;
  padding: 0 12px;
  font-size: 12px;
  font-weight: normal;
  background: #f0f0f0;
  border-color: #ccc;
}

.zoom-btn.mode-toggle:hover {
  background: #e0e0e0;
  border-color: #999;
}

.zoom-btn.mode-toggle.active {
  background: #FF9800;
  color: white;
  border-color: #F57C00;
}

.zoom-btn.mode-toggle.active:hover {
  background: #F57C00;
  border-color: #EF6C00;
}

.zoom-btn.refresh-btn {
  width: auto;
  padding: 0 12px;
  font-size: 12px;
  font-weight: normal;
  background: #17a2b8;
  color: white;
  border-color: #138496;
}

.zoom-btn.refresh-btn:hover {
  background: #138496;
  border-color: #117a8b;
}

.zoom-btn:disabled {
  background: #f5f5f5;
  color: #999;
  border-color: #ddd;
  cursor: not-allowed;
  opacity: 0.6;
}

.zoom-btn:disabled:hover {
  background: #f5f5f5;
  border-color: #ddd;
}

.zoom-level {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  min-width: 50px;
  text-align: center;
}

/* 鼠标位置显示样式 */
.mouse-position {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  border-radius: 8px;
  padding: 10px 15px;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  z-index: 1000;
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.position-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}

.position-item:last-child {
  margin-bottom: 0;
}

.position-item .label {
  color: #ccc;
  margin-right: 8px;
}

.position-item .value {
  color: #00ff00;
  font-weight: bold;
}

/* 清除选择按钮样式 */
.clear-selection-btn {
  margin-top: 10px;
  padding: 8px 16px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.clear-selection-btn:hover {
  background: #c82333;
}

.clear-selection-btn:active {
  background: #bd2130;
}

/* 选择信息面板样式 */
.selection-info-panel {
  position: fixed;
  top: 20px;
  left: 20px;
  background: white;
  border: 2px solid #007bff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  z-index: 1000;
}

.selection-info-panel h4 {
  margin: 0 0 10px 0;
  color: #007bff;
  font-size: 16px;
  font-weight: bold;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.info-item .label {
  font-weight: bold;
  color: #495057;
  min-width: 60px;
}

.info-item .value {
  color: #007bff;
  font-weight: bold;
}

/* 保存计划区域样式 */
.save-plan-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e9ecef;
}

.save-plan-section h5 {
  margin: 0 0 10px 0;
  color: #28a745;
  font-size: 14px;
  font-weight: bold;
}

.plan-type-select {
  padding: 4px 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
  background: white;
  min-width: 100px;
}

.plan-description-input {
  padding: 4px 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
  max-width: 200px;
}

.save-plan-btn {
  background: #28a745;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  margin-right: 10px;
  transition: background-color 0.3s ease;
}

.save-plan-btn:hover:not(:disabled) {
  background: #218838;
}

.save-plan-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.clear-selection-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.clear-selection-btn:hover {
  background: #c82333;
}

/* 保存成功提示样式 */
.save-success-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  animation: toastSlideIn 0.3s ease-out;
}

.toast-content {
  background: #28a745;
  color: white;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 500px;
}

.toast-icon {
  font-size: 20px;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-message {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  white-space: pre-line;
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* 拖拽相关样式 */
.dragging {
  z-index: 1000 !important;
  opacity: 0.8;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
  transition: none !important;
  will-change: transform, opacity;
  transform: translateZ(0); /* 启用硬件加速 */
}

/* 编辑模式下的堆场样式 */
.yard-container.edit-mode {
  cursor: grab;
  transition: box-shadow 0.2s ease;
  will-change: box-shadow;
}

.yard-container.edit-mode:hover {
  cursor: grab;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.yard-container.edit-mode:active {
  cursor: grabbing;
}
</style>
